<template>
  <div class="tab-bar-item">
    <div v-show="!isActive" @click="btnClick">
      <slot name='item-icon'></slot>
    </div>
    <div v-show="isActive" @click="btnClick">
      <slot name='item-icon-active'></slot>
    </div>

    <!-- <slot v-if="!isActive" @click="btnClick" name='item-icon'></slot>
    <slot v-else  @click="btnClick" name='item-icon-active'></slot> -->
    <div :style="activeStyle">
      <slot name='item-text'></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TabBarItem',
    props: {
      path: String,
      activeColor: {
        type: String,
        default: 'red'
      }
    },
    data() {
      return {
        // isActive: false
      }
    },
    computed: {
      isActive () {
        // this.$route 当前活跃的 route 是否是 当前的 route
        // console.log('this.route=', this.$route)
        return this.$route.path.indexOf(this.path) != -1
      },
      activeStyle() {
        return this.isActive? {color: this.activeColor}: {}
      }
    },
    methods: {
      btnClick() {
        // this.isActive = !this.isActive; //如有 计算属性，就不能这么写了，因为没有写setter
        // console.log('btnClick')
        console.log('path=', this.path);
        this.path && this.$router.replace(this.path)
      }
    }
  }
</script>

<style scoped>
  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49;
    font-size: 12px;
  }

  .tab-bar-item img {
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>


<!--
  回顾知识点
  1、图片  默认 、 活跃 效果，  v-if/v-show 的区别
  官方：https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show


  2. slot
  不能写 v-show、v-on:click
  能写 v-if


  3. 回顾 props的使用
-->